<script setup>
import items from '@/assets/data/products'
</script>

<template>
  <div style="background-color: #f4f6f9">
    <div class="banner"></div>
    <div class="wrapper">
      <div class="title">产品中心</div>
      <div class="content">
        <Zcard v-for="item in items" :key="item.id">
          <img :src="item.imgUrl" :alt="item.name" />
          <template #footer>{{ item.name }}</template>
        </Zcard>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.banner {
  background: url('@/assets/images/banner/products.jpg') no-repeat center center;
}
.wrapper {
  padding: 50px 0;
  .content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 250px;
    gap: 20px;
    justify-content: center;
    padding-top: 40px;
    :deep(.zcard):hover {
      cursor: pointer;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      img {
        transform: scale(1.05);
        transition: all 0.3s ease-in-out;
      }
      footer {
        color: #05b1ec;
      }
    }
    img {
      width: 100%;
    }
  }
}
</style>
